<template>
    <div class="user-loan-out">
        <div class="user-loan-out-box">
            <div class="header">
                <div class="header-money">
                    <p>{{info.lendAmount | toYuan}}</p>
                    <span>总出借资金</span>
                </div>
                <div class="header-data">
                    <div class="header-data__item">
                        <p>{{info.lendInterestAmount | toYuan}}</p>
                        <span>总利息</span>
                    </div>
                    <div class="header-data__item">
                        <p>{{info.lendTime || 0}}</p>
                        <span>出借次数</span>
                    </div>
                </div>
            </div>


            <loading-more
                v-model='loading'
                wrapper-box='.user-loan-in-box'
                wrapper='.user-loan-in'
                url='lend/myLendList'
                @finish='setRecords'
                @complete='complete = true'>
                <div class="user-table" v-if='records.length'>
                    <div class="user-table__item head">
                        <span class="user-table__value">借款人</span>
                        <span class="user-table__value">借款时间</span>
                        <span class="user-table__value">金额</span>
                        <span class="user-table__value">状态</span>
                    </div>
                    <ul>
                        <li class="user-table__item" v-for='item in records' @click='goIOU(item.borrowNo)'>
                            <span class="user-table__value">{{item.user.realName}}</span>
                            <span class="user-table__value">{{item.borrowAt | dateFormat}}</span>
                            <span class="user-table__value">{{item.borrowAmount | toYuan}}</span>
                            <span class="user-table__value">{{item.borrowStateStr}}</span>
                        </li>
                    </ul>
                    <loading v-show='loading' :size='15'></loading>
                    <p class='user-list-explain' v-if='complete'>以上为全部借入资金记录</p>
                </div>
            </loading-more>
            <p class="page-placeholder" v-if='!records.length'><span>暂无出借资金记录</span></p>
        </div>
    </div>
</template>

<script>
    import { Promise } from 'es6-promise'
    import loading from '../components/Loading.vue'
    import loadingMore from '../components/LoadingMore.vue'
    import toYuan from '../filters/filter-toYuan'
    import dateFormat from '../filters/filter-dateFormat'
    import  { mapGetters, mapActions }  from 'vuex'
    import { userApi } from '../api/api'
    import moment from 'moment'

    export default {
        components:{
            loading,
            loadingMore
        },
        filters:{
            toYuan,
            dateFormat
        },
        data() {
            return {
                placeholder:'--',
                records:[],
                info:{},
                complete:false,
                loading:true,
                loading_count:true,
            }
        },
        computed:{
            ...mapGetters([
                'msgTip',
                'localInfo'
            ]),
        },
        methods:{
            // actions
            ...mapActions([
                'showLoading',
                'hideLoading',
                'setMsgTip'
            ]),

            getInfo(){
                this.showLoading()
                userApi.loanOutInfo()
                .then(result=>{
                    this.hideLoading()
                    this.info = result
                })
                .catch(error => {
                    console.error(error)
                    this.hideLoading()
                })
            },
            goIOU(no){
                this.$router.push({
                    name:'loan-IOU',
                    params:{
                        number:no
                    }
                })
            },
            setRecords(records){
                this.records = records
            },
        },
        created(){
            this.getInfo()
        }
    }
</script>

<style lang="scss">
    @import "../sass/variables";
    @import "../sass/extends";
    @import "../sass/mixins";
    .user-loan-out{
        .header{
            background-color: #fff;
            padding:24px 0 17px 0;
            text-align: center;
        }
        .header-money{
            p{
                @extend %font-headline;
                font-size: 34px;
                color:$purple;
            }
            span{
                @extend %font-caption;
            }
        }
        .header-data{
            display: flex;
            padding-top: 9px;
        }
        .header-data__item{
            width: 20%;
            flex:1;
            text-align: center;
            p{
                @extend %font-subhead;
            }
            span{
                @extend %font-caption;
            }
        }
    }

</style>
